<!DOCTYPE html>
<html>
<head>
    <title>Optical Path Diagram</title>
</head>
<body>
<canvas id="physicsCanvas" width="600" height="400" style="border:1px solid #d3d3d3;"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Style for the drawing
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 3;
    ctx.lineCap = 'round';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // Coordinates and dimensions
    const y_axis = 200;
    const x1 = 150; // L1 position
    const x2 = 270; // L2 position
    const x_film = 490; // Film position
    const lens_height = 120; // total height of lens

    // Draw Principal Axis
    ctx.beginPath();
    ctx.moveTo(50, y_axis);
    ctx.lineTo(550, y_axis);
    ctx.stroke();

    // Draw Lens L1 (biconvex)
    ctx.beginPath();
    ctx.moveTo(x1, y_axis - lens_height / 2);
    ctx.quadraticCurveTo(x1 + 30, y_axis, x1, y_axis + lens_height / 2);
    ctx.quadraticCurveTo(x1 - 30, y_axis, x1, y_axis - lens_height / 2);
    ctx.stroke();
    // Vertical line for L1 axis
    ctx.beginPath();
    ctx.moveTo(x1, y_axis - lens_height / 2 - 20);
    ctx.lineTo(x1, y_axis + lens_height / 2 + 5);
    ctx.stroke();

    // Draw Label L1
    ctx.font = 'bold 24px serif';
    ctx.fillText('L', x1 - 5, y_axis - lens_height / 2 - 35);
    ctx.font = 'bold 18px serif';
    ctx.fillText('1', x1 + 10, y_axis - lens_height / 2 - 30);


    // Draw Lens L2 (biconcave)
    const lens2_width = 20;
    ctx.beginPath();
    ctx.moveTo(x2 - lens2_width / 2, y_axis - lens_height / 2);
    ctx.lineTo(x2 + lens2_width / 2, y_axis - lens_height / 2);
    ctx.quadraticCurveTo(x2 - lens2_width*1.5, y_axis, x2 + lens2_width / 2, y_axis + lens_height / 2);
    ctx.lineTo(x2 - lens2_width / 2, y_axis + lens_height / 2);
    ctx.quadraticCurveTo(x2 + lens2_width*1.5, y_axis, x2 - lens2_width / 2, y_axis - lens_height / 2);
    ctx.stroke();
     // Vertical line for L2 axis
    ctx.beginPath();
    ctx.moveTo(x2, y_axis - lens_height / 2 - 20);
    ctx.lineTo(x2, y_axis + lens_height / 2 + 5);
    ctx.stroke();

    // Draw Label L2
    ctx.font = 'bold 24px serif';
    ctx.fillText('L', x2 - 5, y_axis - lens_height / 2 - 35);
    ctx.font = 'bold 18px serif';
    ctx.fillText('2', x2 + 10, y_axis - lens_height / 2 - 30);


    // Draw Film
    ctx.beginPath();
    ctx.moveTo(x_film, y_axis - lens_height / 2 - 30);
    ctx.lineTo(x_film, y_axis + lens_height / 2 + 30);
    ctx.stroke();
    ctx.font = 'bold 24px serif';
    ctx.fillText('film', x_film, y_axis - lens_height / 2 - 50);

    // --- Dimension Lines ---
    const y_dim_line = y_axis + 80;
    const arrow_size = 10;
    const tick_size = 5;

    ctx.font = 'bold 20px serif';
    
    // Dimension line for "20 mm"
    ctx.beginPath();
    // Ticks
    ctx.moveTo(x1, y_dim_line - tick_size);
    ctx.lineTo(x1, y_dim_line + tick_size);
    ctx.moveTo(x2, y_dim_line - tick_size);
    ctx.lineTo(x2, y_dim_line + tick_size);
    // Line with arrows
    ctx.moveTo(x1, y_dim_line);
    ctx.lineTo(x2, y_dim_line);
    // Arrow at start
    ctx.moveTo(x1 + arrow_size, y_dim_line - arrow_size/2);
    ctx.lineTo(x1, y_dim_line);
    ctx.lineTo(x1 + arrow_size, y_dim_line + arrow_size/2);
    // Arrow at end
    ctx.moveTo(x2 - arrow_size, y_dim_line - arrow_size/2);
    ctx.lineTo(x2, y_dim_line);
    ctx.lineTo(x2 - arrow_size, y_dim_line + arrow_size/2);
    ctx.stroke();
    ctx.fillText('20 mm', (x1 + x2) / 2, y_dim_line - 20);
    
    // Dimension line for "x"
    ctx.beginPath();
    // Ticks (L2 tick is already conceptually there)
    ctx.moveTo(x_film, y_dim_line - tick_size);
    ctx.lineTo(x_film, y_dim_line + tick_size);
    // Line with arrows
    ctx.moveTo(x2, y_dim_line);
    ctx.lineTo(x_film, y_dim_line);
    // Arrow at start
    ctx.moveTo(x2 + arrow_size, y_dim_line - arrow_size/2);
    ctx.lineTo(x2, y_dim_line);
    ctx.lineTo(x2 + arrow_size, y_dim_line + arrow_size/2);
    // Arrow at end
    ctx.moveTo(x_film - arrow_size, y_dim_line - arrow_size/2);
    ctx.lineTo(x_film, y_dim_line);
    ctx.lineTo(x_film - arrow_size, y_dim_line + arrow_size/2);
    ctx.stroke();
    ctx.fillText('x', (x2 + x_film) / 2, y_dim_line - 20);
    
    // Figure Label
    ctx.font = 'bold 22px serif';
    ctx.fillText('Fig. 1.43', (x1 + x_film) / 2, y_dim_line + 60);

</script>
</body>
</html>